<template>
  <div id="container"></div>
  <Place />
  <Control />
  <Search />
</template>
<script setup>
import { onMounted, provide, ref } from 'vue'
import AMapLoader from '@amap/amap-jsapi-loader'
import Control from './components/Control.vue'
import Place from './components/Place.vue'
import Search from './components/Search.vue'
const mySecurityJsCode = import.meta.env.VITE_mySecurityJsCode
const myKey = import.meta.env.VITE_myKey
let map = ref()
provide('map', map)
onMounted(() => {
  window._AMapSecurityConfig = {
    securityJsCode: mySecurityJsCode,
  }
  AMapLoader.load({
    key: myKey,
    version: '2.0',
    plugins: [
      'AMap.Scale',
      'AMap.ToolBar',
      'AMap.ControlBar',
      'AMap.Geolocation',
      'AMap.RangingTool',
      'AMap.Geocoder',
      'AMap.PlaceSearch', // 搜索
      'AMap.Walking', // 步行
      'AMap.Driving', // 驾车
      'AMap.Transfer', // 公交
      'AMap.AutoComplete',
      'AMap.Weather',
      'AMap.MouseTool',
      'AMap.ContextMenu',
    ],
  })
    .then((AMap) => {
      map.value = new AMap.Map('container', {
        viewMode: '3D',
        zoom: 10,
        resizeEnable: true,
      })

      const scale = new AMap.Scale({
        visible: true,
      }) // 比例尺控件
      const toolBar = new AMap.ToolBar({
        visible: true,
      }) // 工具条控件
      const controlBar = new AMap.ControlBar({
        position: {
          right: '-10px',
          bottom: '130px',
        },
      }) // 控制条控件
      const geolocation = new AMap.Geolocation({
        enableHighAccuracy: true, // 是否使用高精度定位，默认:true
        timeout: 10000, // 超过10秒后停止定位，默认：无穷大
        buttonPosition: 'RB', // 定位按钮的停靠位置
        buttonOffset: new AMap.Pixel(10, 20), // 定位按钮与设置的停靠位置的偏移量
        position: {
          right: '20px',
          bottom: '100px',
        },
        zoomToAccuracy: true, //定位成功后是否自动调整地图视野到定位点
      }) // 定位控件
      map.value.addControl(scale)
      map.value.addControl(toolBar)
      map.value.addControl(controlBar)
      map.value.addControl(geolocation)

      const contextMenu = new AMap.ContextMenu()
      contextMenu.addItem(
        '放大一级',
        function () {
          map.value.zoomIn()
        },
        0
      )
      contextMenu.addItem(
        '缩小一级',
        function () {
          map.value.zoomOut()
        },
        1
      )
      contextMenu.addItem(
        '缩放至全国范围',
        function (e) {
          map.value.setZoomAndCenter(4, [108.946609, 34.262324])
        },
        2
      )
      map.value.on('rightclick', function (e) {
        contextMenu.open(map.value, e.lnglat)
      })
    })
    .catch((e) => {
      console.log(e)
    })
})
</script>

<style scoped>
#container {
  padding: 0px;
  margin: 0px;
  width: 100%;
  height: 100vh;
}
</style>
<style>
.amap-controlbar {
  transform: scale(0.7) !important;
  transform-origin: center center !important;
}
</style>
